/**
 * 静态路由配置
 */
// @ 代表 '/src' 目录的绝对路径
// import Home from '@/views/home'
// import Category from '@/views/category'
// import NotFound from '@/views/not-found'

// 路由懒加载
const Home = () => import('@/views/home')
const Category = () => import('@/views/category')
const Cart = () => import('@/views/cart')
const Mine = () => import('@/views/mine')
const Login = () => import('@/views/login')
const Confirm = () => import('@/views/confirm')
const Detail = () => import('@/views/detail')
const NotFound = () => import('@/views/not-found')

// 这是要复用的头尾组件
const Navbar = () => import('@/components/navbar/AppNavbar')
const Tabbar = () => import('@/components/tabbar/AppTabbar')
// const Tabbar = () => import('@/components/tabbar/AppTabbarVant')

const routes = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    // component: Home, // 使用 component 属性会向 name 为 default 的 router-view 视图处渲染该组件
    components: {
      default: Home,
      footer: Tabbar,
    },
    meta: {
      inTabbar: true, // 当前这个路由会在 tab 项中点击跳转(即这个页面为 tabbar 页面)
      icon: 'home-o',
      title: '首页',
    },
  },
  {
    path: '/category',
    // component: Category,
    components: {
      header: Navbar,
      default: Category,
      footer: Tabbar,
    },
    meta: {
      inTabbar: true,
      icon: 'apps-o',
      title: '分类',
    },
  },
  {
    path: '/cart',
    // component: Cart,
    components: {
      header: Navbar,
      default: Cart,
      footer: Tabbar,
    },
    meta: {
      inTabbar: true,
      icon: 'cart-o',
      title: '购物车',
    },
  },
  {
    path: '/mine',
    // component: Mine,
    components: {
      header: Navbar,
      default: Mine,
      footer: Tabbar,
    },
    meta: {
      inTabbar: true,
      icon: 'user-o',
      title: '我的',
      needPermission: true,
    },
  },
  {
    path: '/login',
    // component: Login,
    components: {
      header: Navbar,
      default: Login,
    },
    meta: {
      title: '用户登录',
    },
  },
  {
    path: '/confirm',
    // component: Confirm,
    components: {
      header: Navbar,
      default: Confirm,
    },
    meta: {
      title: '确认订单',
      needPermission: true,
    },
  },
  {
    path: '/detail',
    // component: Detail,
    components: {
      header: Navbar,
      default: Detail,
    },
    meta: {
      title: '商品详情',
    },
  },
  { // 404 匹配
    path: '*',
    component: NotFound,
  },
]

export default routes
